<template>
	<view class="pointsFor">
		<!-- <navCom navName="积分兑换" @previous="previous"></navCom> -->
		<view class="tab-box my-mgt-20 my-pdlr-30">
			<view class="tabBtn" v-for="(item,index) in tabList" :key="index" @click="tabBtn(item)">
				<view class="name" :class="currType==item?'txt-col':''">{{item}}</view>
				<view :class="currType==item?'active':''"></view>
			</view>
		</view>
		<view class="content_box my-pdlr-15">
			<view class="content_box_txt">积分兑换</view>
			<input type="text" v-model.lazy="pointsnum" value="" class="content_box_inp" />
			<view class="content_box_num">可用交易积分<text class="my-mgl-5">{{currType==='非冻结部分'? points : frozePoints||0}}</text></view>
		</view>
		<view class="prompt_box my-pdl-15">注：积分兑换金额比例为10：1</view>
		<view class="points_btn_box">
			<button type="default" class="btn" @click="pointsForOk">确认兑换</button>
		</view>
	</view>
</template>

<script>
	import navCom from "@/components/navCom/navCom.vue";
	import { pointsforApi } from "@/api/home.js"
	export default {
		components: {
			navCom,
		},
		data() {
			return {
				tabList: ['非冻结部分', '冻结积分'],
				currType: '非冻结部分',
				totalPoints:0,//可用积分
				points:0,//非冻结
				frozePoints:0,//冻结
				pointsnum:null,
				forze:false,
			};
		},
		onLoad(options) {
			this.points = Number(options.points)
			this.frozePoints = Number(options.frozePoints)
		},
		methods:{
			// 确认兑换
			async pointsForOk(){
				if(this.points!== 0||this.frozePoints !== 0){
					if(this.pointsnum !== null){
						let params = {
							forze:this.forze,
							points:this.pointsnum===null? 0 : this.pointsnum
						}
						uni.showLoading({
							title:"正在加载中...."
						})
						const res = await pointsforApi(params)
						if(res.statusCode ===200){
							uni.hideLoading()
							uni.showToast({
								title:"兑换成功",
								icon:"success",
								duration:2000,
								success() {
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1000)
								}
							})
						}
					}else{
						uni.showToast({
							title:"兑换积分不能为空！请输入",
							icon:"none"
						})
					}
				}else{
					uni.showToast({
						title:"无积分可兑换",
						icon:"none"
					})
				}
			},
			// tab切换
			tabBtn(item) {
				this.currType = item
				if(item==='非冻结部分'){
					this.forze = false
				}else{
					this.forze = true
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pointsFor{
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
		position: relative;
		.tab-box {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			.tabBtn {
				width: 50%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
		
				.name {
					width: 100%;
					height: 30%;
					text-align: center;
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
				}
				.txt-col{
					color: #F05329;
				}
				.active {
					width: 70rpx;
					height: 6rpx;
					background: #F05329;
				}
			}
		}
		.content_box{
			width: 100%;
			height: 240rpx;
			background: #FAFAFA;
			.content_box_txt{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}
			.content_box_inp{
				width: 100%;
				height: 85rpx;
				border-bottom: 1rpx solid  #EBEBEB;
			}
			.content_box_num{
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
		}
		.prompt_box{
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #B3B3B3;
		}
		.points_btn_box{
			width: 100%;
			height: 88rpx;
			position: absolute;
			left: 0rpx;
			bottom: 90rpx;
			.btn{
				width: 690rpx;
				height: 88rpx;
				line-height: 88rpx;
				margin: auto;
				background: #F05329;
				border-radius: 10rpx;
				font-size: 38rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
